<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
[
  {
    id,
    type,
    name,
    type,
    children: [
      { id, name, type, children },
      { id, name, type, children },
    ]
  }
]

function Grid () {
  return <div/>
}

const { renderProps } = this.props

<Grid {...renderProps}/>

<script>
  let sum = new Function('a', 'b', 'd', 'return a + b + d');

  // 3
  console.log( sum(1, 2, 3) );
  
  function editorHeader({ id, type, name, children }, cb) {
    return `<div data-id="${ id }" data-type="${ type }" data-name="${ name }">${ cb(children) }</div>`
  }

  function editorGrid({ id, type, name, renderProps, children }, cb) {
    return `<${name} data-id="${ id }" data-type="${ type }" data-name="${ name }" {...renderProps}>${ cb(children) }</${name}>`
  }

  function editor(nodes) {
    let code = {}

    function create(node) {
      switch (node.type) {
        case 'HEADER': {
          return editorHeader(node, (children) => {
            return children.map(node => create(node))
          })
        }
        case 'BODY': {

          break;
        }
        case 'Grid': {
          return editorGrid(node, (children) => {
            return children.map(node => create(node))
          })
        }
        case 'FOOTER': {

          break;
        }
      }
    }

    nodes.map(item => create(item))
  }
</script>
</body>
</html>
